<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理 - 权限管理系统</title>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>用户管理</h1>
        <nav>
            <a href="index.jsp">首页</a>
            <a href="pages/role-list.jsp">角色管理</a>
        </nav>
    </header>

    <div class="content">
        <!-- 搜索区域 -->
        <div class="search-section">
            <h2>用户查询</h2>
            <form id="searchForm" onsubmit="return false;">
                <div class="form-group">
                    <label for="searchUsername">用户名：</label>
                    <input type="text" id="searchUsername" name="username" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <label for="searchEmail">邮箱：</label>
                    <input type="text" id="searchEmail" name="email" placeholder="输入邮箱">
                </div>
                <div class="form-group">
                    <label for="searchStatus">状态：</label>
                    <select id="searchStatus" name="status">
                        <option value="">全部状态</option>
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="button" onclick="searchUsers()" class="btn-primary">搜索</button>
                    <button type="reset" class="btn-secondary">重置</button>
                </div>
            </form>
        </div>

        <!-- 用户详情查询 -->
        <div class="detail-section">
            <h2>用户详情查询</h2>
            <div class="form-group">
                <input type="text" id="username" placeholder="输入用户名查询详情">
                <button type="button" onclick="getUserWithRoles()" class="btn-primary">查询用户详情</button>
            </div>
            <div id="userDetailResult"></div>
        </div>

        <!-- 搜索结果 -->
        <div class="result-section">
            <h2>用户列表</h2>
            <div id="searchResult">
                <div class="info-tip">请输入搜索条件查询用户</div>
            </div>
        </div>
    </div>
</div>

<script>
    // 搜索用户
    async function searchUsers() {
        const username = document.getElementById('searchUsername').value;
        const email = document.getElementById('searchEmail').value;
        const status = document.getElementById('searchStatus').value;

        const params = new URLSearchParams();
        params.append('method', 'searchUsers');
        if (username) params.append('username', username);
        if (email) params.append('email', email);
        if (status) params.append('status', status);

        try {
            const response = await fetch('user?' + params);
            const result = await response.json();

            if (result.code === 200) {
                const users = result.data;
                let html = '';

                if (users.length === 0) {
                    html = '<div class="no-data">未找到匹配的用户</div>';
                } else {
                    users.forEach(function(user) {
                        // 使用传统的字符串拼接，避免模板字符串
                        let rolesHtml = '';
                        if (user.roles && user.roles.length > 0) {
                            user.roles.forEach(function(role) {
                                rolesHtml += '<span class="role-tag">' + role.name + '</span>';
                            });
                        } else {
                            rolesHtml = '<span class="no-role">暂无角色</span>';
                        }

                        const statusClass = user.status === 0 ? 'status-active' : 'status-inactive';
                        const statusText = user.status === 0 ? '正常' : '禁用';
                        const sexText = user.sex === 1 ? '男' : (user.sex === 2 ? '女' : '未知');

                        html += '<div class="user-card">' +
                            '<div class="user-header">' +
                            '<h3>' + user.name + ' (' + user.loginname + ')</h3>' +
                            '<span class="status ' + statusClass + '">' + statusText + '</span>' +
                            '</div>' +
                            '<div class="user-info">' +
                            '<p><strong>邮箱：</strong>' + (user.email || '无') + '</p>' +
                            '<p><strong>手机：</strong>' + (user.mobilephone || '无') + '</p>' +
                            '<p><strong>电话：</strong>' + (user.tel || '无') + '</p>' +
                            '<p><strong>性别：</strong>' + sexText + '</p>' +
                            '</div>' +
                            '<div class="user-roles">' +
                            '<strong>角色：</strong>' + rolesHtml +
                            '</div>' +
                            '</div>';
                    });
                }

                document.getElementById('searchResult').innerHTML = html;
            } else {
                alert('搜索失败: ' + result.message);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('搜索失败');
        }
    }

    // 查询用户详情
    async function getUserWithRoles() {
        const username = document.getElementById('username').value;
        if (!username) {
            alert('请输入用户名');
            return;
        }

        try {
            const response = await fetch('user?method=getUserWithRoles&username=' + encodeURIComponent(username));
            const result = await response.json();

            if (result.code === 200) {
                const user = result.data;
                let rolesHtml = '';

                if (user.roles && user.roles.length > 0) {
                    user.roles.forEach(function(role) {
                        rolesHtml += '<div class="role-card">' +
                            '<h5>' + role.name + '</h5>' +
                            '<p>' + (role.description || '无描述') + '</p>' +
                            '</div>';
                    });
                } else {
                    rolesHtml = '<div class="no-data">暂无角色</div>';
                }

                const statusClass = user.status === 0 ? 'status-active' : 'status-inactive';
                const statusText = user.status === 0 ? '正常' : '禁用';
                const sexText = user.sex === 1 ? '男' : (user.sex === 2 ? '女' : '未知');

                let html = '<div class="user-detail-card">' +
                    '<div class="user-header">' +
                    '<h3>用户详情：' + user.name + '</h3>' +
                    '<span class="status ' + statusClass + '">' + statusText + '</span>' +
                    '</div>' +
                    '<div class="user-detail-info">' +
                    '<div class="info-row">' +
                    '<label>登录名：</label>' +
                    '<span>' + user.loginname + '</span>' +
                    '</div>' +
                    '<div class="info-row">' +
                    '<label>邮箱：</label>' +
                    '<span>' + (user.email || '无') + '</span>' +
                    '</div>' +
                    '<div class="info-row">' +
                    '<label>手机：</label>' +
                    '<span>' + (user.mobilephone || '无') + '</span>' +
                    '</div>' +
                    '<div class="info-row">' +
                    '<label>电话：</label>' +
                    '<span>' + (user.tel || '无') + '</span>' +
                    '</div>' +
                    '<div class="info-row">' +
                    '<label>性别：</label>' +
                    '<span>' + sexText + '</span>' +
                    '</div>' +
                    '<div class="info-row">' +
                    '<label>地址：</label>' +
                    '<span>' + (user.address || '无') + '</span>' +
                    '</div>' +
                    '</div>' +
                    '<div class="roles-section">' +
                    '<h4>角色信息</h4>' + rolesHtml +
                    '</div>' +
                    '</div>';

                document.getElementById('userDetailResult').innerHTML = html;
            } else {
                document.getElementById('userDetailResult').innerHTML =
                    '<div class="error-message">' + result.message + '</div>';
            }
        } catch (error) {
            console.error('Error:', error);
            document.getElementById('userDetailResult').innerHTML =
                '<div class="error-message">查询失败</div>';
        }
    }

    // 页面加载时检查URL参数
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const quickUsername = urlParams.get('quickUsername');

        if (quickUsername) {
            document.getElementById('username').value = quickUsername;
            getUserWithRoles();
        }
    });
</script>
</body>
</html>